<template>
  <div class="hl-header-box">
    <div class="hl-header-left">
      <span>公告：</span>
      <CarouselText :words="props.screenNotice"></CarouselText>
    </div>
    <div class="hl-header-title">
      {{ props.screenTitle }}
    </div>
    <div class="hl-header-right">
      <span>{{ weatherInfo.tem2 }} ~ {{ weatherInfo.tem1 }}</span>
      <img :src="getImgUrl(weatherInfo.wea_img)" alt="">
      <span>{{ dataTime }}</span>
      <span>{{ times }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getTime, weather } from '../../components/Api/index'
import { ref, onMounted, reactive, watch, nextTick } from 'vue'
import $util from '../../util/util'
interface PropsType {
  swiperList?: any
  screenTitle?: string
  screenNotice?: string
}
const props = withDefaults(defineProps<PropsType>(), {
  swiperList: [],
  screenTitle: '',
  screenNotice: '',
})
const dynamicSrc = ref('')
const times = ref<any>('')
const dataTime = ref<any>('')
const TimeStamp = ref<any>('')
onMounted(async () => {
  getTimes()
  // 获取当前日期
  setInterval(() => {
    TimeStamp.value++
    dataTime.value = $util.getNowData(TimeStamp.value)
    times.value = $util.getNowTime(TimeStamp.value)
  }, 1000)
  setTimeout(() => {
    getWeather()
  }, 500)
})
const getTimes = async () => {
  const res: any = await getTime()
  if (res.code !== 1) return;
  TimeStamp.value = JSON.parse(res.data.time)
  dataTime.value = $util.getNowData(TimeStamp.value)
  times.value = $util.getNowTime(TimeStamp.value)
}
// 获取天气和温度
const weatherInfo = ref<any>({})
const getWeather = async () => {
  const res: any = await weather()
  if (res.code !== 1) return;
  weatherInfo.value = res.data[0]
}
const getImgUrl = (img: any) => {
  return new URL(`../../assets/cake/${img}.png`, import.meta.url).href;
}
</script>
<style lang="scss" scoped>
.hl-header-box {
  height: 60px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  background-image: url('@/assets/image/title.png');
  background-size: cover;
  padding: 0 20px;
  display: flex;
  position: relative;
  color: #FFFFFF;
  font-size: 16px;

  .hl-header-left {
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    top: 12px;
    left: 20px;
    display: flex;
    align-items: center;

    span:first-of-type {
      color: #07F7FE;
    }
  }

  .hl-header-title {
    font-family: 'YouSheBiaoTiHei';
    font-size: 28px;
    font-weight: 400;
    color: #07F7FE;
    flex: 1;
    text-align: center;
    margin-top: 8px;
  }

  .hl-header-right {
    position: absolute;
    top: 12px;
    right: 20px;
    display: flex;
    align-items: center;

    img {
      width: 22px;
      display: inline-block;
      margin-left: 5px;
    }

    span:nth-of-type(2) {
      margin-left: 20px;
      margin-right: 20px;
    }
  }
}
</style>
